<template>
	<view class="body">
		<view class="header member-top">
			<view class="header-top hide">
				<image :src="plantformInfo.site_pc_logo || 'https://www.suteshop.com/site/static/src/default/images/landing/bbc.jpg'"></image>
			</view>
			<view class="header-bottom">
				<text>{{ plantformInfo.site_name }}</text>
			</view>
			<view class="logo">
				<image :src="plantformInfo.site_mobile_logo"></image>
			</view>
		</view>
		<view style="padding: 10px;">
			<view class="introduce">
				<!--<view class="title">店铺介绍</view>-->
				<view class="text">{{ plantformInfo.site_meta_description || "" }}</view>
			</view>
			<view class="message">
				<view class="peoplename aboutUs">
					<view>{{ __('公司名称') }}：</view>
					<label>{{ plantformInfo.site_company_name }}</label>
				</view>
				<view class="tel aboutUs" bindtap="call">
					<view>{{ __('联系方式') }}：</view>
					<image src="https://static.shopsuite.cn/xcxfile/appicon/images/call.png" style="width:30rpx;height:30rpx;margin-right:10rpx"></image>
					<label style="color:#17abe3">{{ plantformInfo.site_tel }}</label>
				</view>
				<view class="address aboutUs">
					<view>{{ __('公司地址') }}：</view>
					<label>{{ plantformInfo.site_address }}</label>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';

	export default {
		data() {
			return {};
		},
		computed: mapState([
			'Config',
			'StateCode',
			'notice',
			'plantformInfo',
			'shopInfo',
			'userInfo',
			'hasLogin'
		]),
		async onLoad(options) {
			await this.$onLaunched;
			let that = this;

			uni.setNavigationBarTitle({
				title: this.__('关于我们')
			});

			this.getPlantformInfo(function(plantformInfo) {});
		},
		onNavigationBarButtonTap(e) {
			var that = this;

			if (e.index === 0) {
				that.onShareBox();
				/*
  that.setData({
    shareBoxFlag: 1,
    shareContetnFlag: 1
  })
  */
			} else {
				uni.showToast({
					title: '你点了收藏按钮',
					icon: 'none'
				});
			}
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
			call: function() {
				this.$.makePhoneCall({
					phoneNumber: this.data.plantformInfo.LegalNumber
				});
			}
		}
	};
</script>

<style lang="scss">
	@import '../../styles/_variables.scss';

	.body {
		background: #f8f8f8;
	}

	.header {
		width: 100%;
		height: 400rpx;
		background: #ffffff;
		border-bottom: 2rpx solid #d9d9d9;
	}

	.header-top {
		width: 100%;
		height: 250rpx;
	}

	.header-top image {
		width: 100%;
		height: 250rpx;
	}

	.header-bottom {
		height: 150rpx;
		display: flex;
		justify-content: center;
		font-size: 32rpx;
		color: #000;
	}

	.header-bottom text {
		margin-top: 90rpx;
	}

	.logo {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		top: 180rpx;
		left: 300rpx;
	}

	.logo image {
		width: 100%;
		height: 150rpx;
	}

	.introduce {
		background: #ffffff;
		margin-top: 30rpx;
		padding: 20rpx;
	}

	.introduce .title {
		font-size: 28rpx;
		color: #000;
	}

	.introduce .text {
		font-size: 28rpx;
		color: #717171;
		margin-top: 10rpx;
	}

	.message {
		background: #ffffff;
		padding: 20rpx 20rpx 0 20rpx;
		margin-top: 30rpx;
	}

	.message .title {
		padding-bottom: 20rpx;
		font-size: 28rpx;
		color: #000;
	}

	.message .aboutUs {
		font-size: 28rpx;
		padding: 20rpx 0;
		color: #333;
		display: flex;
	}

	.message .aboutUs view {
		width: 160rpx;
	}

	.message .aboutUs label {
		color: #717171;
		flex: 1;
	}


	.member-top {
		-webkit-animation: changeBg 20s infinite;
		animation: changeBg 20s infinite;
		background-color: #ff6700;
		background-image: url('');
		background-size: cover;
		text-align: center;
		width: 100%;
		/*height: 11rem;*/

		overflow: hidden;
		height: 400rpx;
		/* 320 */

		color: #fff;
		position: relative;
		z-index: 1;
	}

	@-webkit-keyframes changeBg {
		0% {
			background-color: #ff6700;
		}

		90% {
			background-color: #ff6700;
		}

		10% {
			background-color: #fb6e52;
		}

		20% {
			background-color: #ffce55;
		}

		30% {
			background-color: #a0d468;
		}

		40% {
			background-color: #48cfae;
		}

		50% {
			background-color: #4fc0e8;
		}

		60% {
			background-color: #5d9cec;
		}

		70% {
			background-color: #ac92ed;
		}

		80% {
			background-color: #ec87bf;
		}
	}

	@keyframes changeBg {
		0% {
			background-color: #ff6700;
		}

		90% {
			background-color: #ff6700;
		}

		10% {
			background-color: #fb6e52;
		}

		20% {
			background-color: #ffce55;
		}

		30% {
			background-color: #a0d468;
		}

		40% {
			background-color: #48cfae;
		}

		50% {
			background-color: #4fc0e8;
		}

		60% {
			background-color: #5d9cec;
		}

		70% {
			background-color: #ac92ed;
		}

		80% {
			background-color: #ec87bf;
		}
	}
</style>